<template>
  <div>
    <el-table
      :data="productTable"
      border
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="id" label="编号" width="100px"> </el-table-column>
      <el-table-column prop="type" label="产品类型">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.type"
            placeholder="请选择"
            filterable
            clearable
            size="mini"
            @change="changeProductType(scope.row.type, scope.row.index)"
          >
            <el-option
              key="1"
              label="服务产品"
              :value="typeof scope.row.type == 'string' ? 1 + '' : 1"
            >
            </el-option>
            <el-option
              key="2"
              label="实物产品"
              :value="typeof scope.row.type == 'string' ? 2 + '' : 2"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="product" label="产品【ID】/服务卡【ID】">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.product"
            placeholder="请选择"
            filterable
            clearable
            size="mini"
            @change="
              (val) => {
                changeProduct(scope.row, val)
              }
            "
            value-key="id"
          >
            <el-option
              v-for="item in allProducts"
              :key="item.id"
              :label="item.name + '【' + item.id + '】'"
              :value="item"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="产品规格" prop="specs">
        <template slot-scope="scope">
          <span>{{ scope.row.specs }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-link type="danger" @click="deleteProduct(scope.row.index)">
            删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <div class="addColumn">
      <el-button type="text" icon="el-icon-plus" @click="addColumn">
        增加产品
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    productData: {
      type: Array,
      default: function () {
        return {}
      }
    },
    goodsType: {
      type: String,
      default: function () {
        return {}
      }
    },
    typeCodes: {
      type: String,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return { productTable: [], allProducts: [] }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      console.log(this.productData)
      // this.productTable = JSON.parse(JSON.stringify(this.productData))
      var data = []
      for (let i = 0; i < this.productData.length; i++) {
        var item = {}
        item.id = this.productData[i].num
        item.type = this.productData[i].type.id
        item.product = {
          id: this.productData[i].id,
          name: this.productData[i].name,
          specs: this.productData[i].specs
        }
        item.specs = this.productData[i].specs
        data.push(item)
      }
      this.productTable = data
      console.log(this.productTable)
      for (let i = 0; i < this.productTable.length; i++) {
        this.dataFind(this.productTable[i].type)
      }
    },
    tableRowClassName({ row, rowIndex }) {
      //   把每一行的索引放进row
      row.index = rowIndex
    },
    deleteProduct(index) {
      this.productTable.splice(index, 1)
    },
    addColumn() {
      if (this.goodsType === '' || this.typeCodes === '') {
        return this.$message.warning('请先选择商品类型和所属产品分类')
      } else if (
        Number.parseInt(this.goodsType) === 1 &&
        this.productTable.length === 1
      ) {
        return this.$message.warning('单品只可配置一条数据')
      }
      this.productTable.push({
        id: '',
        type: '',
        product: {},
        specs: ''
      })
    },
    changeProductType(type, index) {
      this.allProducts = []

      this.productTable[index].product = {}
      this.productTable[index].specs = ''
      // console.log(this.productTable[index].product)
      this.dataFind(type)
    },
    async dataFind(type) {
      let codestr = ''
      if (type == 1) {
        // 服务卡
        codestr = 'service_card_config'
      } else {
        // 产品
        codestr = 'product'
      }
      const { data: res } = await this.$http.post('/admin/data/find', {
        code: codestr,
        level: 2,
        type_code: this.typeCodes
      })
      // 返回结果
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.allProducts = res.data[codestr]
    },
    changeProduct(row, item) {
      row.specs = item.specs
      this.validProductCofigure(row)
    },
    // 校验产品配置
    validProductCofigure(row) {
      // console.log(row)
      for (let i = 0; i < this.productTable.length; i++) {
        if (
          row.type === this.productTable[i].type &&
          row.product.id === this.productTable[i].product.id &&
          i !== row.index
        ) {
          row.product = {}
          row.specs = ''
          // console.log(this.productTable[i])
          // console.log(row)
          return this.$message.error('不可重复配置产品')
        }
      }
    },
    getFinalData() {
      var product = []
      for (let i = 0; i < this.productTable.length; i++) {
        if (this.productTable[i].product) {
          const item = {}
          item.type = this.productTable[i].type
          item.product_id = this.productTable[i].product.id
          item.id = this.productTable[i].product.id
          product.push(item)
        }
      }
      this.$emit('showProductConfig', product)
    }
  },
  watch: {
    typeCodes: function () {
      this.allProducts = []
      this.productTable = []
    },
    productData: function () {
      this.initData()
    }
  }
}
</script>

<style lang="less" scoped>
.addColumn {
  margin-top: -16px;
  text-align: center;
  border: 1px solid #eee;
  margin-bottom: 10px;
}
</style>
